<template>
  <div class="container">
    <!-- 顶部选项 -->
    <el-row :gutter="10">
      <el-col :span="3">
        <el-button icon="el-icon-plus" :disabled="loading" @click="handleCreate('create')">新增顶层分类</el-button>
      </el-col>
      <el-col :span="3">
        <el-button-group>
          <el-button icon="el-icon-check" :disabled="loading" @click="setStatusList(1)">启用</el-button>
          <el-button icon="el-icon-close" :disabled="loading" @click="setStatusList(0)">禁用</el-button>
        </el-button-group>
      </el-col>
      <el-col :span="2">
        <el-button icon="el-icon-delete" :disabled="loading" @click="removeList">删除</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="7">
        <el-tree
          class="tree-scroll"
          ref="tree"
          :data="data"
          show-checkbox
          node-key="id"
          accordion
          :highlight-current="true"
          @node-click="handleNodeClick"
        >
          <span class="custom-tree-node action" slot-scope="{ node, data }">
            <span class="brother-showing" :class="{ 'status-tree': !data.status }">
              <i class="el-icon-sort move-tree cs-mr-5" />
              <i
                v-if="data.children"
                :class="`el-icon-${node.expanded ? 'folder-opened' : 'folder'}`"
              />
              <i v-else class="el-icon-document" />
              <!-- {{ isFullName ? node.label : data.alias }} -->
              {{ node.label }}
            </span>

            <span class="active">
              <el-button
                type="text"
                size="mini"
                @click.stop="handleAppend(data.goods_category_id)"
              >新增</el-button>

              <el-button
                type="text"
                size="mini"
                @click.stop="setStatusItem(data.goods_category_id, data.status)"
              >{{ data.status ? "禁用" : "启用" }}</el-button>

              <el-button type="text" size="mini" @click.stop="remove([data.goods_category_id])">删除</el-button>
            </span>
          </span>
        </el-tree>
      </el-col>

      <el-col :span="14">
        <el-card class="box-card" shadow="never">
          <div slot="header">
            <span>{{ textMap[formStatus] }}</span>
            <el-button
              v-if="formStatus === 'create'"
              type="text"
              :loading="formLoading"
              style="float: right; padding: 3px 0"
              @click="create"
            >确定</el-button>

            <el-button
              v-else-if="formStatus === 'update'"
              type="text"
              :loading="formLoading"
              style="float: right; padding: 3px 0"
              @click="update"
            >修改</el-button>
          </div>

          <el-form :model="form" :rules="rules" ref="form" label-width="80px">
            <el-form-item label="上级分类" prop="parent_id">
              <el-cascader
                v-model="form.parent_id"
                placeholder="不选择表示顶层分类 试试搜索：手机"
                :key="form.goods_category_id"
                :options="data"
                style="width: 100%"
                filterable
                clearable
              ></el-cascader>
            </el-form-item>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="form.name" placeholder="请输入商品分类名称" :clearable="true" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="关键词" prop="keywords">
              <el-input v-model="form.keywords" placeholder="可输入商品分类关键词" :clearable="true" />
            </el-form-item>

            <el-form-item label="描述" prop="description">
              <el-input
                v-model="form.description"
                placeholder="可输入商品分类描述"
                type="textarea"
                :rows="3"
              />
            </el-form-item>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="类型" prop="category_type">
                  <el-input-number
                    v-model="form.category_type"
                    :min="-128"
                    :max="127"
                    style="width: 120px"
                    controls-position="right"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="排序" prop="sort">
                  <el-input-number
                    v-model="form.sort"
                    :min="0"
                    :max="255"
                    style="width: 120px"
                    controls-position="right"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="状态" prop="status">
                  <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "category",
  data () {
    const data = [
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1",
              },
              {
                id: 10,
                label: "三级 1-1-2",
              },
            ],
          },
        ],
      },
      {
        id: 2,
        label: "一级 2",
        children: [
          {
            id: 5,
            label: "二级 2-1",
          },
          {
            id: 6,
            label: "二级 2-2",
          },
        ],
      },
      {
        id: 3,
        label: "一级 3",
        children: [
          {
            id: 7,
            label: "二级 3-1",
          },
          {
            id: 8,
            label: "二级 3-2",
          },
        ],
      },
    ];
    return {
      loading: false,
      data: JSON.parse(JSON.stringify(data)),
      treeProps: {
        label: "name",
        children: "children",
      },
      textMap: {
        create: "新增分类",
        update: "编辑分类",
      },
      stateButton: {
        create: "确定",
        update: "修改",
      },
      formStatus: "create",
      formLoading: false,
      form: {
        parent_id: undefined,
        name: undefined,
        name_phonetic: undefined,
        alias: undefined,
        alias_phonetic: undefined,
        category_pic: undefined,
        category_ico: undefined,
        keywords: undefined,
        description: undefined,
        category_type: 0,
        sort: 40,
        is_navi: 0,
        status: 1,
      },
      rules: {
        name: [
          {
            required: true,
            message: "名称不能为空",
            trigger: "blur",
          },
          {
            max: 100,
            message: "长度不能大于 100 个字符",
            trigger: "blur",
          },
        ],
        name_phonetic: [
          {
            max: 10,
            message: "长度不能大于 10 个字符",
            trigger: "blur",
          },
        ],
        alias: [
          {
            max: 50,
            message: "长度不能大于 50 个字符",
            trigger: "blur",
          },
        ],
        alias_phonetic: [
          {
            max: 10,
            message: "长度不能大于 10 个字符",
            trigger: "blur",
          },
        ],
        category_pic: [
          {
            max: 512,
            message: "长度不能大于 512 个字符",
            trigger: "blur",
          },
        ],
        category_ico: [
          {
            max: 50,
            message: "长度不能大于 50 个字符",
            trigger: "blur",
          },
        ],
        keywords: [
          {
            max: 255,
            message: "长度不能大于 255 个字符",
            trigger: "blur",
          },
        ],
        description: [
          {
            max: 255,
            message: "长度不能大于 255 个字符",
            trigger: "blur",
          },
        ],
        category_type: [
          {
            type: "number",
            message: "必须为数字值",
            trigger: "blur",
          },
        ],
        sort: [
          {
            type: "number",
            message: "必须为数字值",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleCreate (status) {
      this.resetForm();
      this.resetElements(status);

      if (this.$refs.tree.getCurrentKey()) {
        this.$refs.tree.setCurrentKey(null);
      }
    },
    // 修改启用状态
    setStatusList (val) {
      this.enable(this.$refs.tree.getCheckedKeys(), val);
    },
    // 启用或禁用
    enable (key, val) {
      console.log(key, val);
      return;
      if (!key || !key.length) {
        this.$message.error("请选择要操作的数据");
        return;
      }

      this.$confirm("确定要执行该操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
      })
        .then(() => {
          setGoodsCategoryStatus(key, val).then(() => {
            this.expanded = [...key];
            this.$emit("refresh");
            this.$message.success("操作成功");
          });
        })
        .catch(() => { });
    },
    removeList () {
      console.log("123");
    },
    handleAppend (data) {
      const newChild = { id: id++, label: "testtest", children: [] };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },
    setStatusItem () { },
    remove (node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },
    handleNodeClick (data) {
      console.log(data);
      this.resetForm();
      this.resetElements("update");
      this.form = { ...data };
    },
    resetForm () {
      this.form = {
        parent_id: 0,
        name: "",
        name_phonetic: "",
        alias: "",
        alias_phonetic: "",
        category_pic: "",
        category_ico: "",
        keywords: "",
        description: "",
        category_type: 0,
        sort: 50,
        is_navi: 0,
        status: 1,
      };
    },
    // 重置元素
    resetElements (val = "create") {
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });

      this.formStatus = val;
      this.formLoading = false;
    },
    update () { },
    create () { },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}
.tree-scroll {
  max-height: 615px;
  overflow: auto;
  padding-bottom: 1px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.brother-showing i {
  width: 16px;
}

.active {
  display: none;
}

.action:hover .active {
  display: block;
}

.move-tree {
  color: #ccc;
  cursor: move;
}

.status-tree {
  color: #ccc;
}
</style>